<template>
    <div class="issueroom">
        <main>
            <div class="head">
                <van-icon name="arrow-left" @click="()=>{this.$router.go(-1)}" />
                <p>发布房源</p>
                <span></span>
            </div>
            <div class="houseMsg">房源信息</div>
            <div class="cityName">
                <van-cell
                  title="小区名称"
                  is-link
                  :value="communityName"
                  @click="()=>{this.$router.push('/rentarch')}"
                />
            </div>
            <div class="money">
                <span>租&emsp;&emsp;金</span>
                <input type="text" v-model="fromList.price" placeholder="请输入租金/月" />
                <span>￥/月</span>
            </div>
            <div class="money">
                <span>建筑面积</span>
                <input type="text" v-model="fromList.size" placeholder="请输入租金/月" />
                <span>㎡</span>
            </div>
            <div class="oriented">
                <van-cell
                    @click="selectRoom"
                    title="户型"
                    is-link
                    :value="fromList.roomType?fromList.roomType:'请选择'"
                />
                <van-popup v-model="roomTypeShow" round position="bottom">
                  <van-picker
                      show-toolbar
                      :columns="columns"
                      @cancel="roomTypeShow = false"
                      @confirm="onConfirm"
                  />
                </van-popup>
            </div>
            <div class="floow">
                <van-cell
                    @click="selectFloor"
                    title="所在楼层"
                    is-link
                    :value="fromList.floor?fromList.floor:'请选择'"
                />
            </div>
            <div class="oriented">
                <van-cell
                    @click="selectOriented"
                    title="户型朝向"
                    is-link
                    :value="fromList.oriented?fromList.oriented:'请选择'"
                />
            </div>
            <div class="houseTitle">
                <p>房屋标题</p>
                <van-field
                  v-model="fromList.title"
                  rows="2"
                  autosize
                  type="textarea"
                  placeholder="请输入标题（例如：整租 小区名 2室 5000元）"
                  show-word-limit
                />
            </div>
            <div class="fileImg">
                <p>房屋图像</p>
                <van-uploader v-model="fromList.fileList" multiple />
            </div>
            <div class="supporting">
                <p>房屋配置</p>
                <van-grid :column-num="5" :border="false">
                  <van-grid-item
                    @click="selectSupporting"
                    v-for="(v,i) in icons"
                    :key="i"
                    :icon="v.icon"
                    :text="v.title"
                    />
                </van-grid>
            </div>
            <div class="description">
                <p>房屋描述</p>
                <van-field
                v-model="fromList.description"
                rows="2"
                autosize
                type="textarea"
                maxlength="50"
                placeholder="请输入房屋描述"
                show-word-limit
                />
            </div>
        </main>
        <footer>
            <van-button plain type="primary" @click="()=>{this.$router.go(-1)}">取消</van-button>
            <van-button type="primary" @click="addOk">确认</van-button>
        </footer>
  </div>
</template>

<script>
export default {
  data () {
    return {
      fromList: {
        community: '',
        description: '', // 房屋描述
        title: '', // 房屋标题
        price: '', // 价格
        size: '', // 面积
        roomType: '', // 户型
        floor: '', // 楼层
        oriented: '', // 朝向
        fileList: [], // 图片
        supporting: [] // 家具
      },
      communityName: this.$route.query.communityName
        ? this.$route.query.communityName
        : '请选择小区名称',
      icons: [
        {
          title: '衣柜',
          icon: 'icon iconfont icon-yigui'
        },
        {
          title: '洗衣机',
          icon: 'icon iconfont icon-xiyiji'
        },
        {
          title: '空调',
          icon: 'icon iconfont icon-kongtiao'
        },
        {
          title: '天然气',
          icon: 'icon iconfont icon-tianranqi1'
        },
        {
          title: '冰箱',
          icon: 'icon iconfont icon-bingxiang'
        },
        {
          title: '暖气',
          icon: 'icon iconfont icon-nuanqi'
        },
        {
          title: '电视',
          icon: 'icon iconfont icon-dianshi'
        },
        {
          title: '热水器',
          icon: 'icon iconfont icon-reshuiqi'
        },
        {
          title: '宽带',
          icon: 'icon iconfont icon-kuandai'
        },
        {
          title: '沙发',
          icon: 'icon iconfont icon-shafa'
        }
      ],
      columns: [], // 选择数据
      isWho: '',
      roomTypeShow: false
    }
  },
  created () {},
  methods: {
    // 确认选择
    onConfirm (e) {
      if (this.isWho === '选择户型') {
        this.fromList.roomType = e
      } else if (this.isWho === '选择楼层') {
        this.fromList.floor = e
      } else if (this.isWho === '选择朝向') {
        this.fromList.oriented = e
      }
      this.roomTypeShow = false
    },
    // 选择户型
    selectRoom () {
      this.columns = ['一室', '二室', '三室', '四室', '四室+']
      this.isWho = '选择户型'
      this.roomTypeShow = true
    },
    // 选择楼层
    selectFloor () {
      this.columns = ['高楼层', '中楼层', '低楼层']
      this.isWho = '选择楼层'
      this.roomTypeShow = true
    },
    // 选择朝向
    selectOriented () {
      this.columns = ['东', '西', '南', '北', '东南', '东北', '西南', '西北']
      this.isWho = '选择朝向'
      this.roomTypeShow = true
    },
    // 选择家具
    selectSupporting (e) {
      console.log(e.target.nodeName)
      if (e.target.nodeName === 'I') {
        e.target.parentNode.classList.toggle('actives')
        const index = this.fromList.supporting.findIndex(
          v => v === e.target.nextElementSibling.innerHTML
        )
        if (index === -1) {
          this.fromList.supporting.push(e.target.nextElementSibling.innerHTML)
        } else {
          this.fromList.supporting.splice(index, 1)
        }
      }
    },
    // 确认添加
    addOk () {
      this.fromList.supporting = this.fromList.supporting.join('|')
      console.log(this.fromList)
    }
  }
}
</script>

<style scoped lang="scss">
.issueroom{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
main{
  width: 100%;
  flex: 1;
  overflow-y: scroll;
  background: #f2f2f2;
  .head{
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    font-size: 20px;
    background: #f2f2f2;
    >p{
        font-size: 18px;
    }
  }
  .houseMsg{
    width: 100%;
    height: 40px;
    line-height: 40px;
    padding: 0 15px;
    font-size: 14px;
    color: #21b97a;
    border-bottom: 1px solid #f2f2f2;
    background: #fff;
  }
  .cityName{
    border-bottom: solid 1px #f2f2f2;
  }
  .money{
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    background: #fff;
    border-bottom: solid 1px #f2f2f2;
    input{
      border: none;
      outline: none;
      font-size: 14px;
    }
    span{
      font-size: 14px;
    }
  }
  .oriented{
    border-bottom: solid 1px #f2f2f2;
  }
  .floow{
    border-bottom: solid 1px #f2f2f2;
  }
  .oriented{
    border-bottom: solid 1px #f2f2f2;
  }
  .houseTitle{
    width: 100%;
    padding: 0 15px;
    background: #fff;
    p{
      width: 100%;
      height: 40px;
      line-height: 40px;
      font-size: 14px;
    }
  }
  .fileImg{
    width: 100%;
    padding: 0 15px;
    background: #fff;
    p{
      width: 100%;
      height: 35px;
      line-height: 35px;
      font-size: 14px;
    }
  }
  .supporting{
    width: 100%;
    padding: 0 15px;
    background: #fff;
    p{
      width: 100%;
      height: 35px;
      line-height: 35px;
      font-size: 14px;
    }
    .actives{
      color: green;
    }
  }
  .description{
    width: 100%;
    padding: 0 15px;
    margin: 15px 0;
    background: #fff;
    p{
      width: 100%;
      height: 35px;
      line-height: 35px;
      font-size: 14px;
    }
  }
}
footer{
  width: 100%;
  height: 45px;
  .van-button{
    width: calc(100%/2);
    height: 100%;
    font-size: 16px;
    border: none;
    outline: none;
  }
  :nth-child(2){
    background: seagreen;
    color: #fff;
  }
}
</style>
